<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>编辑商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <script src="/static/layui/layui.js" charset="utf-8"></script>
    <!-- layer -->
    {#    <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>#}
    <script src='/static/js/jquery-1.10.2.min.js'></script>
</head>
<body>
{% load set_val %}


<script>
    function update_product_image() {
        var product_list_image = document.getElementById('product_list_image');
        var input_product_list_net_image = document.getElementById('input_product_list_net_image');
        img_url = input_product_list_net_image.value
        product_list_image.src = img_url;
        // console.log('update_product_image')

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
        $.ajax({
            url: '/update_product_list_image/',
            type: 'post',
            datatype: 'json',
            data: {
                'product_id':{{ product.id }},
                'product_list_image_url': img_url
            },
            success: function (e) {
                // console.log(e)
                //var msg = e.result
                var msg = e
                if (msg == 'success') {
                    //将图片展示
                    product_list_image.src = img_url;
                }
                else {
                    layer.msg('添加失败')
                }
            }
        })
    }

    function update_product_booth_image() {
        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/\{(\d+)\}/g,
                function (m, i) {
                    return args[i];
                });
        }


        var content1 = "<div id=\"div_booth_img\" class=\"layui-row\"><div class=\"layui-col-md10\"><img src={0}><br><input type=\"checkbox\" name=\"booth_img_{{ x }}\" lay-skin=\"primary\" checked=\"\"></div></div>"
        var content = '<div id="div_booth_img" class="layui-col-md5"><img src={0}><br><input type="checkbox" name="booth_image_checkbox_{1}" lay-skin="primary" checked=""> <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div> </div>'

        var div_product_booth_image = document.getElementById('div_product_booth_image');
        var input_product_booth_image = document.getElementById('input_product_booth_image');

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
        //将图片加入数据库
        $.ajax({
            url: '/add_product_booth_and_detail_image/',
            datatype: 'json',
            type: 'post',
            data: {
                product_id:{{ product.id }},
                image_site: 'booth_image',
                'image_net_url': input_product_booth_image.value
            },
            success: function (e) {
                var res = e.res
                var image_id = e.image_id
                console.log('res=' + res)
                if (res == 'success') {
                    //将图片展示
                    div_product_booth_image.innerHTML = div_product_booth_image.innerHTML + content.format(input_product_booth_image.value, image_id);
                }
                else if (res == 'exist') {
                    layer.msg('图片已经存在了')
                }
            }
        });


    }

    function update_product_detail_image() {
        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/\{(\d+)\}/g,
                function (m, i) {
                    return args[i];
                });
        }
        {#            var a = "I Love {0}, and You Love {1},Where are {0}!";#}
        {#            alert(a.format("You", "Me"));#}

        var content1 = "<div id=\"div_detail_img\" class=\"layui-row\"><div class=\"layui-col-md10\"><img src={0}><br><input type=\"checkbox\" name=\"detail_image_checkbox_{1}\" lay-skin=\"primary\" checked=\"\"></div></div>"
        var content = '<div id="div_detail_img" class="layui-row"><div class="layui-col-md10"><img src={0}><br><input type="checkbox" name="detail_image_checkbox_{1}" lay-skin="primary" checked=""> <div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary"><i class="layui-icon"></i></div> </div></div>'
        var div_product_detail_image = document.getElementById('div_product_detail_image');
        var input_product_detail_image = document.getElementById('input_product_detail_image');

        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });
        //将图片加入数据库
        $.ajax({
            url: '/add_product_booth_and_detail_image/',
            datatype: 'json',
            type: 'post',
            data: {
                product_id:{{ product.id }},
                image_site: 'detail_image',
                'image_net_url': input_product_detail_image.value
            },
            success: function (e) {
                var res = e.res
                var image_id = e.image_id
                console.log('res=' + res)
                if (res == 'success') {
                    //将图片展示
                    div_product_detail_image.innerHTML = div_product_detail_image.innerHTML + content.format(input_product_detail_image.value, image_id);

                }
                else if (res == 'exist') {
                    layer.msg('图片已经存在了')
                }
            }
        });
        return false; //用了layui，写在这里就没有用了
    }
</script>
{% if True%}
    <form id="edit_shop_form" class="layui-form" method="post" action="/publish_product/">
{% endif %}
    {% csrf_token %}
    <input name="action" hidden="hidden" value="{{ action }}">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            {{ product.name }}
            <div style="height: 10px"></div>
            <input type="text" name="product_name" lay-verify="required" autocomplete="off" placeholder="请输入商品名称"
                   class="layui-input" value='{{ product.name }}'>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            {{ product.price }}
            <div style="height: 10px"></div>
            <input type="text" name="product_price" lay-verify="number" autocomplete="off" placeholder="请输入商品价格"
                   class="layui-input" value='{{ product.price }}'>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品库存</label>

        <label class="layui-form-label">{{ product.count }}</label>

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品列表图</label>
        <div id="div_product_list_image" class="layui-input-block">
            <div class="layui-col-md3">
                <img id="product_list_image" src={{ product.image }}>
            </div>

            <div class="layui-row">
                <button class="layui-btn layui-btn-smal" onclick="update_product_image();return false;">网络上传
                </button>
                <button class="layui-btn layui-btn-smal">本地上传</button>
                <div class="layui-col-md3">
                    <input id="input_product_list_net_image" value="" type="text" name="input_product_image_url"
                           autocomplete="off" placeholder="请输入图片网络地址"
                           class="layui-input">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-form-label">商品颜色</div>
        <div class="layui-input-block">
            {% with color_id=0 %}
                {% for color in color_list %}

                    <div class="layui-col-md2">
                        <div class="layui-row">
                            原名：{{ color.name }}
                        </div>

                        名字：
                        <input style="width: 70px;display:inline;" type="text"
                               name="color_another_name_{{ color_id }}"
                               lay-verify="required"
                               autocomplete="off" placeholder=""
                               class="layui-input" value={{ color.name }}>

                        <br>
                        {% if color.is_valid %}
                            <input type="checkbox" name="color_checkbox_{{ color_id }}" lay-skin="primary"
                                   checked="checked">
                        {% else %}
                            <input type="checkbox" name="color_checkbox_{{ color_id }}" lay-skin="primary">
                        {% endif %}

                        {% set color_id++ %}
                    </div>
                {% endfor %}
            {% endwith %}

        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-form-label">商品尺码</div>
        <div class="layui-input-block">
            {% with size_id=0 %}

                {% for size in  size_list %}

                    <div class="layui-col-md2">
                        <div class="layui-row">
                            原名：{{ size.name }}
                        </div>
                        名字：
                        <input style="width: 40px;display:inline;" type="text"
                               name="size_another_name_{{ size_id }}" ,
                               lay-verify="required"
                               autocomplete="off" placeholder=""
                               class="layui-input" value={{ size.name }}>
                        <br>
                        {% if size.is_valid %}
                            <input type="checkbox" name="size_checkbox_{{ size_id }}" lay-skin="primary"
                                   checked="checked">
                        {% else %}
                            <input type="checkbox" name="size_checkbox_{{ size_id }}" lay-skin="primary">
                        {% endif %}

                        {% set size_id++ %}
                    </div>
                {% endfor %}
            {% endwith %}

        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-form-label">顶部图片</div>
        <div class="layui-input-block">
            <div id="div_product_booth_image" class="layui-row">
                {% with booth_image_checkbox_id=0 %}
                    {% for booth_image in booth_image_list %}
                        <div id="div_booth_img" class="layui-col-md5">
                            <img src={{ booth_image.net_path }}>
                            <br>
                            {% if booth_image.is_valid %}
                                <input type="checkbox" name="booth_image_checkbox_{{ booth_image_checkbox_id }}"
                                       lay-skin="primary"
                                       checked="checked">
                            {% else %}
                                <input type="checkbox" name="booth_image_checkbox_{{ booth_image_checkbox_id }}"
                                       lay-skin="primary"
                                >
                            {% endif %}

                            {% set booth_image_checkbox_id++ %}
                        </div>
                    {% endfor %}
                {% endwith %}
            </div>

            <div class="layui-row">
                <button class="layui-btn layui-btn-smal" onclick="update_product_booth_image();return false;">网络上传
                </button>
                <button class="layui-btn layui-btn-smal">本地上传</button>
                <div class="layui-col-md3">
                    <input id="input_product_booth_image" type="text" name="net_booth_img_url" autocomplete="off"
                           placeholder="请输入图片网络地址"
                           class="layui-input"
                           value=''>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-form-label">详细图片</div>
        <div class="layui-input-block">
            <div id="div_product_detail_image">

                {% with detail_image_checkbox_id=0 %}
                    {% for detail_image in detail_image_list %}
                        <div id="div_detail_img" class="layui-row">
                            <div class="layui-col-md10">
                                <img src={{ detail_image.net_path }}>
                                <br>
                                {% if detail_image.is_valid %}
                                    <input type="checkbox" name="detail_image_checkbox_{{ detail_image_checkbox_id }}"
                                           lay-skin="primary" checked="checked">
                                {% else %}
                                    <input type="checkbox" name="detail_image_checkbox_{{ detail_image_checkbox_id }}"
                                           lay-skin="primary">
                                {% endif %}

                                {% set detail_image_checkbox_id++ %}
                            </div>
                        </div>
                    {% endfor %}
                {% endwith %}

            </div>


            <div class="layui-row">
                <button class="layui-btn layui-btn-smal" onclick="update_product_detail_image();return false;">网络上传
                </button>
                <button class="layui-btn layui-btn-smal">本地上传</button>
                <div class="layui-col-md3">
                    <input id="input_product_detail_image" type="text" name="net_detail_img_url"
                           autocomplete="off" placeholder="请输入图片网络地址"
                           class="layui-input"
                           value=''>
                </div>
            </div>
        </div>
    </div>
    <input type="text" name="product_id" value="{{ product.id }}" hidden="hidden">

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            var content = JSON.stringify(data.field)
            console.log(content)
            return true;
        });
    });
</script>


</body>
</html>